import {messages} from "share/common";
import React from "react";
import { connect } from 'react-redux'
import { Menu, Checkbox, Row, Button, Icon, Anchor, Spin, message, Dropdown, Modal, Badge, Popover, Input } from 'antd'
const Search = Input.Search;
const confirm = Modal.confirm;
const {Link} = Anchor;
import ListSort from 'components/list-sort'
import 'styles/help-center-admin/question-maintenance.scss'
import QuestionMaintenanceService from 'containers/help-center-admin/question-maintenance/question-maintenance-service'
import menuRoute from "routes/menuRoute";
import {LanguageInput} from 'components/index';
import debounce from 'lodash.debounce';
import nodata from 'images/question-maintenance/nodata.png'
import cloudSync from 'images/question-maintenance/cloud-sync.png'

class QuestionMaintenance extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      visible: false,
      data: [],
      showBG: false,//排序时的背景遮罩
      searchValue: this.props.location.state ? this.props.location.state.searchValue : '',//搜索框输入的值
      searching: false,//当前处于搜索状态
      loadings: {uat: false, stage: false, console: false, search: false, list: false},//此页面中所有的loading
      quesSortList: [],//排好序的问题列表
      checkedQues: [],//选中的问题
      category: {id: null, name: '', i18n: {name: []}},//新增问题分类或当前问题分类
      sortQues: menuRoute.getRouteItem('question-maintenance-sort', 'key').url,
      addQues: menuRoute.getRouteItem('question-maintenance-add', 'key').url,
      detailQues: menuRoute.getRouteItem('question-maintenance-detail', 'key').url,
    };
    this.onSearchQuestion = debounce(this.onSearchQuestion, 500);
  }

  componentWillMount (){
    const {searchValue} = this.state;
    if(searchValue){
      this.onSearchQuestion(searchValue);
    }else{
      this.getAllQuesList();
    }
  }

  //获取问题列表（已发布的问题）
  getAllQuesList = () => {
    this.setState({
      loading: true,
    });
    QuestionMaintenanceService.getAllQuesList('COMMONPROBLEM', this.props.language.code).then(res => {
      res.data.map(item => {
        item.checked = false;
        item.batchOperation = false;
        item.sort = false;
        if(item.commonProblems && item.commonProblems.length){
          item.commonProblems.map(ques => {
            ques.checked = false;
          })
        }
      });
      this.setState({
        loading: false,
        data: res.data,
      });
    }).catch(err => {
      this.setState({
        loading: false,
      });
    })
  };

  onSearchQuesChange = (e) => {
    if(e.target.value.length > 50){
      message.error(messages('help-center-admin.key17')/*搜索框最多输入50个字符*/)
    }else{
      this.setState({
        searchValue: e.target.value,
      });
      this.onSearchQuestion(e.target.value);
    }
  };

  //搜索问题
  onSearchQuestion = (value) => {
    let item = {
      keyword: encodeURI(value),
      language: this.props.language.code,
    };
    this.setState({
      loading: true,
      searching: true,
    });
    QuestionMaintenanceService.searchQues(item).then(res => {
      this.setState({
        loading: false,
        data: res.data,
      })
    }).catch(err => {
      this.setState({
        loading: false,
      });
    });

  };


  //排序分类
  onClickSort = () => {
    this.context.router.push(this.state.sortQues)
  };

  //新增问题
  onClickAdd = () => {
    this.context.router.push({pathname: this.state.addQues, state:{}})
  };

  //子应用名称：多语言
  i18nAppNameChange = (name, i18nName) => {
      let category = this.state.category;
      category.name = name;
    if (!category.i18n) {
      category.i18n = {};
    }
      category.i18n.name = i18nName;
  };

  //新增问题分类
  onClickAddCategory = () => {
    this.setState({
      visible: true,
      category: {id: null, name: '', i18n: {name: []}},//新增问题分类
    })
  };

  onModalOk = () => {
    const {category, searchValue} = this.state;
    if(category.name.length > 200){
      message.error((messages('help-center-admin.key11')/*名称长度不能超过200个字符*/))
    }else {
      this.setState({
        loading: true,
      });
      let item = Object.assign({}, category);
      item.categoryType = "COMMONPROBLEM";
      if (category.id) {
        QuestionMaintenanceService.editCategory(item).then(res => {
          this.setState({
            visible: false,
            loading: false,
          });
          if(searchValue){
            this.onSearchQuestion(searchValue);
          }else{
            this.getAllQuesList();
          }
        }).catch(err => {
          this.setState({
            loading: false,
          });
        });
      } else {
        QuestionMaintenanceService.onClickAddCategory(item).then(res => {
          this.setState({
            visible: false,
            loading: false,
          });
          if(searchValue){
            this.onSearchQuestion(searchValue);
          }else{
            this.getAllQuesList();
          }
        }).catch(err => {
          this.setState({
            loading: false,
          });
        });
      }
    }
  };

  onModalCancel = () => {
    this.setState({
      visible: false,
    })
  };

  //编辑下的按钮
  renderButtonMenu = (item, index) => {
    if(item.tenantId === 0 || item.tenantId === "0"){
      return (
        <Menu onClick={e => this.handleClickEditMenu(e, item, index)}>
          <Menu.Item key="enable">{item.enabled ? messages('common.disabled')/*禁用*/: messages('common.enabled')/*启用*/ }</Menu.Item>
          {item.commonProblems && item.commonProblems.length && <Menu.Item key="batch">{messages('help-center-admin.key19')/*批量操作*/}</Menu.Item>}
        </Menu>
      );
    }else{
      return (
        <Menu onClick={e => this.handleClickEditMenu(e, item, index)}>
          <Menu.Item key="rename">{messages('help-center-admin.key20')/*重命名*/}</Menu.Item>
          {item.commonProblems && item.commonProblems.length && <Menu.Item key="batch">{messages('help-center-admin.key19')/*批量操作*/}</Menu.Item>}
          <Menu.Item key="delete">{messages('common.delete')/*删除*/}</Menu.Item>
        </Menu>
      );
    }
  };

  //点击编辑
  handleClickEditMenu = (e, item, index) => {
    const {data, searchValue} = this.state;
    switch(e.key) {
      case 'enable':
        this.enableCategory(item.id, item.enabled);
        break;
      case 'rename':
        this.getCategoryDetail(item.id);
        break;
      case 'batch':
        data.map((param, indexP) => {
          if(indexP !== index){
            this.batchOperation(e, indexP, false)
          }
        });
        this.batchOperation(e, index, true);
        break;
      case 'delete':
        if (item.commonProblems && item.commonProblems.length > 0)
          Modal.warning({
            title: messages('help-center-admin.key21')/*删除前请先移动该分类下的问题*/
          });
        else {
          let that = this;
          confirm({
            title: messages('help-center-admin.key22')/*确认要删除该分类吗？*/,
            okText: messages('help-center-admin.key23')/*确认*/,
            cancelText: messages('common.cancel')/*取消*/,
            onOk() {
              QuestionMaintenanceService.deleteCategory(item.id).then(res => {
                message.success(messages('help-center-admin.key24')/*删除成功*/);
                if(searchValue){
                  that.onSearchQuestion(searchValue);
                }else{
                  that.getAllQuesList();
                }
              }).catch(err => {

              })
            },
            onCancel() {

            },
          });
        }
    }
  };

  getCategoryDetail = (id) => {
    QuestionMaintenanceService.getCategoryDetail(id, this.props.language.code).then(res => {
      this.setState({
        category: res.data,
        visible: true,
        loading: false,
      });
    }).catch(err => {
      this.setState({
        loading: false,
      });
    });
  };

  //点击名称行的排序
  onClickTitleSort = (e, index, bool) => {
    const {data} = this.state;
    data[index].sort = bool;
    this.setState({
      data,
      showBG: bool,
    });
  };

  //某一分类下的问题排序时
  handleSortQues = (result) => {
    let arr = [];
    result.map((item, index) => {
      arr.push({
        id: item.key,
      })
    });
    this.setState({ quesSortList: arr });
  };

  //排序完成
  finishSort = (e, index) => {
    const { quesSortList, data, searchValue} = this.state;
    let ids = [];
    quesSortList.map(item => {
      ids.addIfNotExist(item.id)
    });
    let item = {
      ids: ids,
      commonProblemCategoryId: data[index].id
    };
    QuestionMaintenanceService.sortQuesList(item).then(res => {
      message.success(messages('help-center-admin.key25')/*排序完成*/);
      this.setState({
        loading: false,
      });
      this.batchOperation(e, index, false);
      if(searchValue){
        this.onSearchQuestion(searchValue);
      }else{
        this.getAllQuesList();
      }
    }).catch(err => {
      this.setState({
        loading: false,
      });
    });
    this.onClickTitleSort(e, index, false)
  };

  //点击，取消批量操作
  batchOperation = (e, index, bool) => {
    const {data} = this.state;
    data[index].batchOperation = bool;
    data[index].checked = false;
    data[index].commonProblems && data[index].commonProblems.length && data[index].commonProblems.map(item => {
      item.checked = false;
    });
    this.setState({
      data,
    });
  };

  //点分类名称前的CheckBox时
  onCheckCategoryTitle = (e, index) => {
    const {data} = this.state;
    data[index].checked = e.target.checked;
    data[index].commonProblems.map(item => {
      item.checked = e.target.checked;
    });
    this.setState({
      data,
    })
  };

  //点问题前的CheckBox时
  onCheckQues = (e, index, quesIndex) => {
    const {data} = this.state;
    let checkAll = true;
    data[index].commonProblems[quesIndex].checked = e.target.checked;
    data[index].commonProblems.map(item => {
      if(!item.checked){
        checkAll = false;
      }
    });
    data[index].checked = checkAll;
    this.setState({
      data,
    });
  };

  enableCategory = (id, bool) => {
    const {searchValue} = this.state;
    let params = {
      ids: [id],
      enabled: !bool
    };
    QuestionMaintenanceService.enableCategory(params).then(res => {
      message.success(messages('common.operate.success')/*操作成功*/);
      this.setState({
        loading: false,
      });
      if(searchValue){
        this.onSearchQuestion(searchValue);
      }else{
        this.getAllQuesList();
      }
    }).catch(err => {
      this.setState({
        loading: false,
      });
    })
  };

  //批量启用禁用问题
  enableCategoryQues = (e, index, bool) => {
    const {data, searchValue} = this.state;
    let arr = [];
    data[index].commonProblems.map(item => {
      if(item.checked){
        arr.addIfNotExist(item.id)
      }
    });
    if(arr.length){
      this.setState({
        loading: true,
      });
      let params = {
        ids: arr,
        enabled: bool,
        enableCategoryQues: data[index].id
      };
      QuestionMaintenanceService.enableCategoryQues(params).then(res => {
        message.success(messages('common.operate.success')/*操作成功*/);
        this.setState({
          loading: false,
        });
        this.batchOperation(e, index, false);
        if(searchValue){
          this.onSearchQuestion(searchValue);
        }else{
          this.getAllQuesList();
        }
      }).catch(err => {
        this.setState({
          loading: false,
        });
      })
    }else{
      message.error(messages('help-center-admin.key26')/*请先勾选问题*/)
    }
  };

  //点击每一行问题
  goToDetail = (e, categoryId, questionId) => {
    const {detailQues, searchValue} = this.state;
    this.context.router.push({
      pathname: detailQues,
      state: {
        categoryId,
        questionId,
        searchValue
      }
    });
  };

  render() {
    const {loading, visible, category, data, showBG, searchValue} = this.state;
    return (
      <div className={'question-maintenance'}>
        {showBG ? <div className="sort-backdrop" /> : null}
        <div className={'question-maintenance-body'}>
          <div className={"question-maintenance-body-left"}>
            <div className={'question-maintenance-head-left'}>
              <Button style={{marginRight: 10}} onClick={this.onClickAddCategory}>
                <Icon type={'plus'}/> {messages('help-center-admin.key27')/*新增分类*/}
              </Button>
              <Button onClick={this.onClickSort}>
                <Icon type="swap"/> {messages('help-center-admin.key28')/*排序分类*/}
              </Button>
            </div>
            <div className={"question-maintenance-body-left-content"}>
            <Spin spinning={loading} className={'question-maintenance-body-left-spin'}>
              {
                data.length ?
                  <Anchor affix={false}
                          showInkInFixed={true}
                          getContainer={() => document.getElementsByClassName('question-maintenance-body-left-spin')[0]}>
                    {data.map(item => {
                      return (
                        <Link href={`#${item.id}`}
                              title={<Popover content={<span>{item.tenantId === 0 || item.tenantId === "0" && <span>({messages('help-center-admin.key7')/*系统*/})&nbsp;</span>}{item.name}</span>}
                                              placement={'topLeft'}
                                              overlayStyle={{maxWidth: 500}}>
                                <div className={"question-maintenance-body-left-title"}>
                                  {item.tenantId === 0 || item.tenantId === "0" &&
                                  <span><img src={cloudSync} style={{height: 22, width: 22}}/>&nbsp;</span>}
                                  {item.name}
                                  {item.enabled === false && <span>（{messages('common.disabling')/*已禁用*/}）</span>}
                                </div>
                              </Popover>}
                              key={item.id}/>
                      )})}
                  </Anchor>
                  :
                  <div style={{textAlign: "center", color: "rgb(0,0,0,0.45)"}}>
                    <img src={nodata} style={{width: 32, height: 39}}/>
                    <span style={{marginLeft: 10}}>{messages('help-center-admin.key31')/*没有搜到任何数据*/}</span>
                  </div>
              }
            </Spin>
            </div>
          </div>
          <div className={"question-maintenance-body-right"}>
            <div className={'question-maintenance-head-right'}>
              <Button type={'primary'} style={{marginLeft: 20}} onClick={this.onClickAdd}> {messages('help-center-admin.key29')/*新增问题*/}
              </Button>
              <Search
                placeholder={messages('help-center-admin.key30')/*请输入问题*/}
                value={searchValue}
                onChange={this.onSearchQuesChange}
                style={{ width: 300, float: 'right'}}
              />
            </div>
            <div className={"question-maintenance-body-right-content"}>
            <Spin spinning={loading}>
              {
                data.length ?
                  data.map((item, index) => {
                    return (
                      <div className={item.sort ? "category-list-active" : 'category-list'} key={item.id}>
                        <div className="category-list-head" id={'' + item.id}>
                          {
                            item.batchOperation ?
                              <div className="category-title">
                                <Checkbox onChange={(e) => {this.onCheckCategoryTitle(e, index)}}
                                          checked={item.checked}>
                                </Checkbox>
                                &nbsp;&nbsp;
                                <Popover placement={"topLeft"}
                                         overlayStyle={{maxWidth: 500}}
                                         content={<span>{item.name}&nbsp;({item.commonProblems ? item.commonProblems.length : 0})</span>}>
                                  {item.name}&nbsp;({item.commonProblems ? item.commonProblems.length : 0})
                                </Popover>
                                {item.enabled === false &&
                                <span>
                              &nbsp;&nbsp;
                                  <Button size={'small'}
                                          style={{background: 'black', color: 'white', fontSize: 9}}> {messages('common.disabling')/*已禁用*/}
                            </Button>
                            </span>
                                }
                                {item.id ? null :
                                  <span style={{color: "rgb(153,153,153)", fontWeight: 400, fontSize: 14}}>
                                    &nbsp;&nbsp;{messages('help-center-admin.key37')/*此分类无法编辑和排序，请尽快将此分类下的问题重新分类*/}
                                  </span>}
                              </div>
                              :
                              <div className="category-title">
                                <Popover placement={"topLeft"}
                                         overlayStyle={{maxWidth: 500}}
                                         content={<span>{item.name}&nbsp;({item.commonProblems ? item.commonProblems.length : 0})</span>}>
                                  {item.name}&nbsp;({item.commonProblems ? item.commonProblems.length : 0})
                                </Popover>
                                {item.enabled === false &&
                                <span>
                                &nbsp;&nbsp;
                                  <Button size={'small'}
                                          style={{background: 'black', color: 'white', fontSize: 9}}> {messages('common.disabling')/*已禁用*/}
                            </Button>
                              </span>
                                }
                                {
                                  item.id ? null :
                                  <span style={{color: "rgb(153,153,153)", fontWeight: 400, fontSize: 14}}>
                                    &nbsp;&nbsp;{messages('help-center-admin.key37')/*此分类无法编辑和排序，请尽快将此分类下的问题重新分类*/}
                                  </span>
                                }
                              </div>
                          }
                          {
                            item.batchOperation ?
                              <div className="category-title-buttons">
                                <Button type={'primary'}
                                        loading={loading}
                                        style={{marginRight: 10}}
                                        onClick={(e) => {this.enableCategoryQues(e, index, true)}}> {messages('common.enabled')/* 启用*/}
                                </Button>
                                <Button type={'danger'}
                                        loading={loading}
                                        style={{borderColor: '#f04134', color: 'white', background: '#f04134'}}
                                        onClick={(e) => {this.enableCategoryQues(e, index, false)}}> {messages('common.disabled')/*禁用*/}
                                </Button>
                                <Button style={{marginLeft: 10}}
                                        onClick={(e) =>{this.batchOperation(e, index, false)}}> {messages('common.cancel')/*取消*/}
                                </Button>
                              </div>
                              :
                              (
                                item.sort ?
                                  <div className="category-title-buttons">
                                    <Button style={{marginRight: 10}}
                                            type={'primary'}
                                            onClick={(e) => {this.finishSort(e, index)}}> {messages('help-center-admin.key16')/*完成*/}
                                    </Button>
                                    <Button onClick={(e) => {this.onClickTitleSort(e, index, false)}}> {messages('common.cancel')/*取消*/}
                                    </Button>
                                  </div>
                                  :
                                  (item.id ?
                                    <div className="category-title-buttons">
                                      <Dropdown overlay={this.renderButtonMenu(item, index)}>
                                        <Button style={{marginRight: 10}}> {messages('common.edit')/*编辑*/} <Icon type="down"/>
                                        </Button>
                                      </Dropdown>
                                      <Button onClick={(e) => {this.onClickTitleSort(e, index, true)}}
                                              disabled={!(item.commonProblems && item.commonProblems.length > 1 && !searchValue)}> {messages('help-center-admin.key33')/*排序*/}
                                      </Button>
                                    </div>
                                      : null
                                  )
                              )
                          }
                        </div>
                        { item.batchOperation ?
                          item.commonProblems && item.commonProblems.map((question, quesIndex) => {
                            return(
                              <div className={'category-list-question'} key={question.id}>
                                <div className={"category-list-question-question"}>
                                  <Checkbox onChange={(e) => {this.onCheckQues(e, index, quesIndex)}}
                                            checked={question.checked}>
                                  </Checkbox>
                                  &nbsp;&nbsp;
                                  <Popover placement={"topLeft"}
                                           overlayStyle={{maxWidth: 500}}
                                           content={question.question}>
                                    {question.question}
                                  </Popover>
                                </div>
                                <div className={"category-list-question-source"}>
                                  <Popover placement={"topLeft"}
                                           content={<span>{messages('common.from')/*来源*/}：{question.tenantId === 0 || question.tenantId === "0" ? messages('help-center-admin.key7')/*系统*/ : messages('help-center-admin.key8')/*自定义*/}</span>}>
                                    <span>{messages('common.from')/*来源*/}：{question.tenantId === 0 || question.tenantId === "0" ? messages('help-center-admin.key7')/*系统*/ : messages('help-center-admin.key8')/*自定义*/}</span>
                                  </Popover>
                                </div>
                                <div className={"category-list-question-auth"}>
                                  {question.authorities && question.authorities.length ?
                                    <Popover placement={"topLeft"}
                                             content={
                                      <span>{messages('help-center-admin.key5')/*角色*/}：
                                        {(question.authorities.filter(item => item.code === "ROLE_USER").length) ? messages('help-center-admin.key6')/*全员*/
                                          :
                                          question.authorities.map(auth => {
                                            return (
                                              <span key={auth.id}>{auth.name}&nbsp;&nbsp;</span>
                                            )
                                          })}
                                      </span>
                                    }>
                                     <span>{messages('help-center-admin.key5')/*角色*/}：
                                       {(question.authorities.filter(item => item.code === "ROLE_USER").length) ? messages('help-center-admin.key6')/*全员*/
                                         :
                                         question.authorities.map(auth => {
                                           return (
                                             <span key={auth.id}>{auth.name}&nbsp;&nbsp;</span>
                                           )
                                         })
                                       }
                                    </span>
                                    </Popover>
                                    : <span>{messages('help-center-admin.key5')/*角色*/}：-</span>
                                  }
                                </div>
                                <div className={"category-list-question-badge"}>
                                  <Popover content={question.enabled ? messages('common.enabled')/*启用*/ : messages('common.disabled')/*禁用*/}
                                           placement={"topLeft"}>
                                    <Badge status={question.enabled ? 'success' : 'error'}/>{question.enabled ? messages('common.enabled')/*启用*/ : messages('common.disabled')/*禁用*/}
                                  </Popover>
                                </div>
                              </div>
                            )
                          })
                          :
                          (
                            item.sort ?
                              <ListSort onChange={this.handleSortQues} dragClassName="list-drag-selected" key={item.id}>
                                {item.commonProblems && item.commonProblems.map(question => {
                                  return (
                                    <div className={'category-list-question'} key={question.id}>
                                      <div className={"category-list-question-question"}>
                                        <Popover placement={"topLeft"}
                                                 overlayStyle={{maxWidth: 500}}
                                                 content={question.question}>
                                          {question.question}
                                        </Popover>
                                      </div>
                                      <div className={"category-list-question-source"}>
                                        <Popover placement={"topLeft"}
                                                 content={<span>{messages('common.from')/*来源*/}：{question.tenantId === 0 || question.tenantId === "0" ? messages('help-center-admin.key7')/*系统*/ : messages('help-center-admin.key8')/*自定义*/}</span>}>
                                          <span>{messages('common.from')/*来源*/}：{question.tenantId === 0 || question.tenantId === "0" ? messages('help-center-admin.key7')/*系统*/ : messages('help-center-admin.key8')/*自定义*/}</span>
                                        </Popover>
                                      </div>
                                      <div className={"category-list-question-auth"}>
                                        {question.authorities && question.authorities.length ?
                                          <Popover placement={"topLeft"}
                                                   content={
                                            <span>{messages('help-center-admin.key5')/*角色*/}：
                                              {(question.authorities.filter(item => item.code === "ROLE_USER").length) ? messages('help-center-admin.key6')/*全员*/
                                                :
                                                question.authorities.map(auth => {
                                                  return (
                                                    <span key={auth.id}>{auth.name}&nbsp;&nbsp;</span>
                                                  )
                                                })}
                                            </span>}>
                                     <span>{messages('help-center-admin.key5')/*角色*/}：
                                       {(question.authorities.filter(item => item.code === "ROLE_USER").length) ? messages('help-center-admin.key6')/*全员*/
                                         :
                                         question.authorities.map(auth => {
                                           return (
                                             <span key={auth.id}>{auth.name}&nbsp;&nbsp;</span>
                                           )
                                         })
                                       }
                                    </span>
                                          </Popover>
                                          : <span>{messages('help-center-admin.key5')/*角色*/}：-</span>
                                        }
                                      </div>
                                      <div className={"category-list-question-badge"}>
                                        <Popover content={question.enabled ? messages('common.enabled')/*启用*/ : messages('common.disabled')/*禁用*/}
                                                 placement={"topLeft"}>
                                          <Badge status={question.enabled ? 'success' : 'error'}/>{question.enabled ? messages('common.enabled')/*启用*/ : messages('common.disabled')/*禁用*/}
                                        </Popover>
                                      </div>
                                    </div>
                                  )
                                })}
                              </ListSort>
                              :
                              item.commonProblems && item.commonProblems.map(question => {
                                return (
                                  <div className={'category-list-question'}
                                       key={question.id}
                                       style={{cursor: 'pointer'}}
                                       onClick={(e) => {this.goToDetail(e, item.id, question.id)}}>
                                    <div className={"category-list-question-question"}>
                                      {searchValue ?
                                        <Popover placement={"topLeft"}
                                                 overlayStyle={{maxWidth: 500}}
                                                 content={question.question}>
                                          <div  dangerouslySetInnerHTML={{__html: question.question.replace(searchValue, `<span style='color: #4B8DFF'>${searchValue}</span>`)}}/>
                                        </Popover>
                                        :
                                        <Popover placement={"topLeft"}
                                                 overlayStyle={{maxWidth: 500}}
                                                 content={question.question}>
                                          {question.question}
                                        </Popover>
                                      }
                                    </div>
                                    <div className={"category-list-question-source"}>
                                      <Popover placement={"topLeft"} content={<span>{messages('common.from')/*来源*/}：{question.tenantId === 0 || question.tenantId === "0" ? messages('help-center-admin.key7')/*系统*/ : messages('help-center-admin.key8')/*自定义*/}</span>}>
                                        <span>{messages('common.from')/*来源*/}：{question.tenantId === 0 || question.tenantId === "0" ? messages('help-center-admin.key7')/*系统*/ : messages('help-center-admin.key8')/*自定义*/}</span>
                                      </Popover>
                                    </div>
                                    <div className={"category-list-question-auth"}>
                                      {question.authorities && question.authorities.length ?
                                        <Popover placement={"topLeft"}
                                                 content={
                                          <span>{messages('help-center-admin.key5')/*角色*/}：
                                            {(question.authorities.filter(item => item.code === "ROLE_USER").length) ? messages('help-center-admin.key6')/*全员*/
                                              :
                                              question.authorities.map(auth => {
                                                return (
                                                  <span key={auth.id}>{auth.name}&nbsp;&nbsp;</span>
                                                )
                                              })}
                                          </span>}>
                                     <span>{messages('help-center-admin.key5')/*角色*/}：
                                       {(question.authorities.filter(item => item.code === "ROLE_USER").length) ? messages('help-center-admin.key6')/*全员*/
                                         :
                                         question.authorities.map(auth => {
                                           return (
                                             <span key={auth.id}>{auth.name}&nbsp;&nbsp;</span>
                                           )
                                         })
                                       }
                                    </span>
                                        </Popover>
                                        : <span>{messages('help-center-admin.key5')/*角色*/}：-</span>
                                      }
                                    </div>
                                    <div className={"category-list-question-badge"}>
                                      <Popover content={question.enabled ? messages('common.enabled')/*启用*/ : messages('common.disabled')/*禁用*/} placement={"topLeft"}>
                                        <Badge status={question.enabled ? 'success' : 'error'}/>{question.enabled ? messages('common.enabled')/*启用*/ : messages('common.disabled')/*禁用*/}
                                      </Popover>
                                    </div>
                                  </div>
                                )
                              })
                          )
                        }
                      </div>
                    )
                  })
                  : <div style={{textAlign: "center", marginTop: 100}}>
                    <img src={nodata} style={{width: 134, height: 160}}/>
                    <div style={{fontSize: 16, fontWeight: 600, marginTop: 30}}>{messages('help-center-admin.key31')/*没有搜到任何数据*/}</div>
                  </div>
              }
            </Spin>
            </div>
          </div>
        </div>
        <Modal title={category.id ? messages('help-center-admin.key34')/*编辑问题分类*/ : messages('help-center-admin.key35')/*新增问题分类*/}
               visible={visible}
               onOk={this.onModalOk}
               onCancel={this.onModalCancel}
               confirmLoading={loading}>
          <div> {messages('help-center-admin.key36')/*问题分类名称*/}：
            <LanguageInput
              name={category.name}
              i18nName={category.i18n.name}
              isEdit={category.id}
              nameChange={this.i18nAppNameChange}/>
          </div>
        </Modal>
      </div>
    )
  }
}
QuestionMaintenance.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    language: state.main.language
  }
}

export default connect(mapStateToProps)(QuestionMaintenance)
